<template>
  <div class="clearfix" >
    <a-card class="custom-card" style="height: calc(100vh - 130px); padding: 5px">
      <!-- 树控件区域-->
      <template>
        <a-dropdown :trigger="[dropTrigger]" @visibleChange="dropStatus">
          <lone-asnc-tree ref="loneAsncTree"
                          :url="url"
                          :initDataFatherFunction="initDataFatherFunction"
                          :searchKeyWordFunction="searchKeyWordFunction"
                          :addFatherFunction="addFatherFunction"
                          :editFatherFunction="editFatherFunction"
                          :dropTrigger="dropTrigger"
                          :buttonTitle="buttonTitle"
                          :permissionData="permissionData"
                          :permissionKeys="permissionKeys"
                          :placeholder="placeholder"
                          :icon="icon"
                          :selectedKeyData="selectedKeyData"
                          :checkable="checkable"
                          :multiple="multiple"
                          :db-click="`Y`"
                          :rightTitle="rightTitle"
                          :columns="columns"
                          @rightHandle="rightHandle"
                          @dropStatus="dropStatus"
                          @handleTreeAdd="handleTreeAdd"
                          @handleTreeEdit="handleTreeEdit"
                          @handleTreeDelete="handleTreeDelete"
                          @closeDrop="closeDrop"
                          @onSelect="onSelect"
                          @onDbSelect="onDbSelect"
          />
          <!--新增右键点击事件,增加添加编辑删除功能-->
        </a-dropdown>
      </template>
      <mms-wz-warehouse-info-modal ref="modalForm" @ok="modalFormOk" @close="onClose"></mms-wz-warehouse-info-modal>
    </a-card>
  </div>
</template>
<script>

  import LoneAsncTree from '../base/form/ClassifyLoneAsncTree'
  import ACol from 'ant-design-vue/es/grid/Col'
  import { getAction} from '@lone/lone-vue/src/api/manage'
  import ARow from 'ant-design-vue/es/grid/Row'
  import { LoneAsncTreeMixin } from '@/mixins/LoneAsncTreeMixin'
  import '@/assets/less/TableExpand.less'
  import MmsWzWarehouseInfoModal from './modules/MmsWzWarehouseInfoModal'

  export default {
    mixins: [LoneAsncTreeMixin],
    components: {
      ARow,
      ACol,
      LoneAsncTree,
      MmsWzWarehouseInfoModal
    },
    data () {
      return {
        buttonName:'仓库管理',
        loading:false,
        dropTrigger: 'contextmenu',
        rightClickSelectedKey:'',
        treeLink: '',
        url: {
          delete: '/ck/mmsWzWarehouseInfo/delete',
          list: "/base/mmsMaterialInfo/list",
          navList: '/ck/mmsWzWarehouseInfo/treeList',
          search: '/ck/mmsWzWarehouseInfo/searchBy',
          queryById:'/ck/mmsWzWarehouseInfo/queryById',
          importExcelUrl: "/ck/mmsWzWarehouseInfo/importExcel",
        },
        rightTitle: '仓库管理',
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'物资编码',
            align:"center",
            dataIndex: 'code'
          },
          {
            title:'物资名称',
            align:"center",
            dataIndex: 'name'
          },
          {
            title:'规格',
            align:"center",
            dataIndex: 'specs'
          },
          {
            title:'型号',
            align:"center",
            dataIndex: 'model'
          },
          {
            title:'物资分类',
            align:"center",
            dataIndex: 'classifyCode'
          },
          {
            title:'物资分类名称',
            align:"center",
            dataIndex: 'classifyName'
          },
          {
            title:'计量单位',
            align:"center",
            dataIndex: 'unit'
          },
          {
            title:'技术参数',
            align:"center",
            dataIndex: 'param'
          },
          {
            title:'供应商',
            align:"center",
            dataIndex: 'supplierId'
          },
          {
            title:'供应商名称',
            align:"center",
            dataIndex: 'supplierName'
          },
          {
            title:'是否需质检',
            align:"center",
            dataIndex: 'isQuality'
          },
          {
            title:'品牌',
            align:"center",
            dataIndex: 'brand'
          },
          {
            title:'最低使用寿命',
            align:"center",
            dataIndex: 'lowestLife'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        //控制按钮是否显示  增删改，0 1 2 默认开启，
        permissionKeys: [
          {
            addKey: '0',
            editKey: '',
            deleteKey: '2',
            refreshKey: '3',
          }
        ],
        //按钮权限控制
        permissionData: [
          {
            dataPermissionAdd: '',
            dataPermissionEdit: '',
            dataPermissionDelete: '',
            dataPermissionRefresh: '',
          }
        ],
        //按钮内容
        buttonTitle:'仓库管理',
        placeholder:'请输入仓库名称',
        onSelectKey:'no',
        //树形控件定制图标
        icon: [
          {
            //叶子节点
            slot :'smile',//图标分模块化
            linkType : 'pic-right',//图标类型
            style :'color:green' //图标显示颜色
          },{
            //非叶子结点
            slot :'meh',//图标分模块化
            linkType : 'pic-left',//图标类型
            style :'color:red' //图标显示颜色
          }
        ],
        multiple:false,
        checkable:false,
        selectedKeyData:'yes',
        //保存选中的Key
        selectKeys:'',
        expandedKeys: [],
        searchData: []
      }
    },
    created() {
      let that = this
    //  if(that.$route.params.mmsMaterialClassify){
        that.initData()
     // }
    },
    watch:{
      lockFlag(val){
        this.permissionKeys = []
        if(val ==1){
          let json = {
            addKey: '0',
            editKey: '1',
            deleteKey: '2',
            refreshKey: '3',
          }
          this.permissionKeys.push(json)
        }else{
          let json = {
            addKey: '6',
            editKey: '6',
            deleteKey: '6',
            refreshKey: '3',
          }
          this.permissionKeys.push(json)
        }
      }
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },

    },
    methods: {
      getParentKey (key, tree) {
        let that = this, parentKey;
        for (let i = 0; i < tree.length; i++) {
          const node = tree[i];
          if (node.children) {
            if (node.children.some(item => item.key === key)) {
              parentKey = node.key;
            } else if (that.getParentKey(key, node.children)) {
              parentKey = that.getParentKey(key, node.children);
            }
          }
        }
        return parentKey;
      },
      searchKeyWordFunction(value){
        if (value) {
          getAction(this.url.search,{ keyWord:value }).then((res) => {
            if (res.success) {
              this.$refs.loneAsncTree.treeSource = res.result
              this.$refs.loneAsncTree.loading = false
            }
          })
          this.$refs.loneAsncTree.expandedKeys = expandedKeys;
        }else{
          this.initData()
        }
      },
      initDataFatherFunction (key = '', first = true, url = this.url.navList) {
        let that = this
        getAction(url,{ key }).then((res) => {
          if (res.success) {
            that.$refs.loneAsncTree.treeSource = res.result
            that.$refs.loneAsncTree.loading = false
          }
        })
      },
      addFatherFunction(num){
        let selectKey = this.$refs.loneAsncTree.selectedKeys[0]
        if(num == 1){
          if(selectKey == undefined || selectKey == ''){
            this.$message.warning('请先选中一条记录!');
            return false;
          }
          //temp 为当前传入的节点
          this.$refs.modalForm.add(selectKey);
        }else{
          //temp 为当前传入的节点
          this.$refs.modalForm.add(null);
        }
        this.$refs.modalForm.title = "新增";
      },
      editFatherFunction(){
        let selectedKey = this.$refs.loneAsncTree.selectedKeys[0];
        if(selectedKey == undefined || selectedKey == ''){
          this.$message.warning('请先选中一条记录!');
          return false;
        }
        this.$refs.modalForm.edit(selectedKey);
        this.$refs.modalForm.title = "编辑";
      },
      modalFormOk(){
        this.initData();
      },
      onClose(){
        this.selectKeys = ''
      },
      onSelect(record){
        if(record.key != undefined){
          this.selectKeys = record.key;
          this.$refs.loneAsncTree.queryParam.treeCode = record.key;
          this.$refs.loneAsncTree.loadData(1);
        }
      },
      onDbSelect(selectKey){
      },
    },
  }
</script>
<style scoped lang="scss">
  .card-scroll {
    height: calc(100vh - 140px);
    overflow: hidden;
    /deep/.ant-card-body {
      height: calc(100vh - 140px);
      overflow: hidden;
      .left-wrap {
        position: relative;
        height: calc(100vh - 188px) !important;
        padding-top: 52px;
        overflow: hidden;
        .btn-wrap {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 52px;
          z-index: 9999;
        }
        .tree-wrap {
          height: calc(100vh - 240px) !important;
          overflow: auto;
        }
      }
    }
  }

  .area-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 10px;
    &:before {
      content: '';
      width: 4px;
      height: 14px;
      background-color: #1890FF;
      position: absolute;
      left: 0px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .ant-card-body{
    .clearfix{
      .custom-card{
        /deep/ .ant-card-body{
          padding: 0 4px!important;
        }
      }
    }
  }
</style>